<template>
    <!-- 底部导航 -->
    <ul class="bottomNav">
        <li>
            <router-link to="/home" active-class="active">
                <img src="@/assets/images/iconPark-home.svg" alt="">
            </router-link>
        </li>
        <li>
            <router-link to="/together" active-class="active">
                <img src="@/assets/images/iconPark-friends-circle.svg" alt="">
            </router-link>
        </li>
        <li class="add">
            <router-link to="/publish" active-class="active">
                <img src="@/assets/images/iconPark-add-one.svg" alt="">
            </router-link>
        </li>
        
        <li>
            <router-link to="/message" active-class="active">
                <img src="@/assets/images/iconPark-communication.svg" alt="">
            </router-link>
        </li>
        <li>
            <router-link to="/mine" active-class="active">
                <img src="@/assets/images/iconPark-people.svg" alt="">
            </router-link>
        </li>
    </ul>         
</template>
    
<script setup>
    import {useRouter} from 'vue-router'
    const router  = useRouter();
    //在【通过路由规则】进入该组件时调用，直接挂载组件不会调用
    
</script>
    
<style scoped lang="scss">
    .bottomNav{
        position: fixed;
        z-index: 999;
        bottom: 0;
        background-color: #fff;
        height: 0.64rem;
        width: 4.28rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        >li{
            display: flex;
            align-items: center;
            img{
                width: 0.24rem;
                height: 0.24rem;
            }
        }

        li.add{
            img{
                width: 0.43rem;
                height: 0.43rem; 
            }
        }
    }
</style>